<template>
    <div id="article_detail">
        <el-select v-model="detail.type" size="small" placeholder="文章类型">
            <el-option v-for="item in typeList" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="detail.status" size="small" placeholder="状态">
            <el-option v-for="item in stateList" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button size="small" type="primary" @click="submit"  >保存</el-button>
        <div class="title">
            <el-input placeholder="文章标题" v-model="detail.title"></el-input>
        </div>
        <div class="title">
            <el-input placeholder="简介" v-model="detail.summary"></el-input>
        </div>
        <div class="title">
            <el-input placeholder="关键词" v-model="detail.keywords"></el-input>
        </div>
        <div id="editor"></div>
    </div>
</template>

<script>
import E from 'wangeditor'
export default {
    name: '',
    data() {
        return {
            detail:{
                type:'',
                status:'',
                title: '',
                summary: '',
               tenantid:sessionStorage.getItem("tenantid"),

            },
            typeList: [
                {
                    label:'系统公告',
                    value:1
                },
                {
                    label:'新闻资讯',
                    value:2
                },
                {
                    label:'行业资讯',
                    value:3
                },
                {
                    label:'常见问题',
                    value:4
                },
                {
                    label:'关于我们',
                    value:5
                },
                {
                    label:'代发指南',
                    value:6
                },
            ],
            stateList:[
                {
                    label: '待发布',
                    value: 0
                },
                {
                    label: '发布',
                    value: 1
                }
            ],
            editor:{},
        }
    },
    created(){},
    mounted(){
        let id = this.$route.query.id
        if(id){
            this.getDetail(id)
        }else{
            this.editor = new E('#editor')
            this.editor.customConfig.zIndex = 100
            this.editor.customConfig.uploadImgMaxLength = 1
            this.editor.customConfig.customUploadImg = (files, insert) => {
                let reader = new FileReader()
                reader.onload = () => {
                    let img = JSON.stringify([reader.result])
                    this.$request.post({
                        url: '/ReportApi/tenant/Articleupload',
                        params: {
                            img
                        },
                        success: res => {
                            insert(res)
                        }
                    })
                }
                reader.readAsDataURL(files[0])
            }
            this.editor.create()
        }
    },
    watch: {},
    methods: {
        submit(){
            if(this.detail.type==''){
                this.$message.error('请选择文章类型')
                return
            }
            if(this.detail.status===''){
                this.$message.error('请选择状态')
                return
            }
            if(this.detail.title==''){
                this.$message.error('请填写标题')
                return
            }
            if(this.detail.summary==''){
                this.$message.error('请填写简介')
                return
            }
            if(this.detail.keywords==''){
                this.$message.error('请填关键词')
                return
            };
            this.detail.content = this.editor.txt.html()
            if(this.$route.query.id){
                this.update()
            }else{
                this.add()
            }
        },
        add(){
            this.$request.post({
                url: '/ReportApi/tenant/Articleadd',
                params:{
                    ...this.detail
                },
                success: res => {
                    this.$message.success('操作成功')
                    this.$router.push('/article/list')
                }
            })
        },
        update(){
            this.$request.post({
                url: '/ReportApi/tenant/Articleupdate',
                params:{
                    ...this.detail
                },
                success: res => {
                   
                    this.$message.success('操作成功')
                    this.$router.push('/article/list')
                }
            })
        },
        getDetail(id){
            this.$request.post({
                url: '/ReportApi/tenant/Articledetail',
                params:{
                    id,
                    tenantid:sessionStorage.getItem("tenantid")
                },
                success: res => {
                    this.detail = Object.assign({},this.detail,res)
                    this.editor = new E('#editor')
                    this.editor.customConfig.zIndex = 100
                    this.editor.customConfig.uploadImgMaxLength = 1
                    this.editor.customConfig.customUploadImg = (files, insert) => {
                        let reader = new FileReader()
                        reader.onload = () => {
                            let img = JSON.stringify([reader.result])
                            console.log(img)
                            this.$request.post({
                                url: '/ReportApi/tenant/Articleupload',
                                params: {
                                    img
                                },
                                success: res => {
                                    insert(res)
                                }
                            })
                        }
                        reader.readAsDataURL(files[0])
                    }
                    this.editor.create()
                    this.$nextTick(() => {
                        let str = this.detail.content
                        this.editor.txt.html(str)
                    })
                }
            })
        },
    }
}
</script>

<style>
.el-select-dropdown{
    z-index: 10001;
}
.w-e-text img{
             width: 100% !important;
         }
.w-e-text-container{
    height: 67vh !important;
}
</style>
<style lang="scss" scoped>
#article_detail{
    .el-button{
        margin-left: 10px;
    }
    .title{
        margin-top: 10px;
        margin-bottom: 10px;
    }
   
}

#editor{
     .w-e-text-container{
         height: 80vh !important;
        
     }
   }

</style>